<template>
    <el-icon @click="toggleFullScreen" >
      <FullScreen />
    </el-icon>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import screenfull from 'screenfull';
import {FullScreen} from "@element-plus/icons-vue";

const isFullscreen = ref(false);

const toggleFullScreen = () => {
  if (screenfull.enabled) {
    screenfull.toggle();
  }
};

const handleFullscreenChange = () => {
  isFullscreen.value = screenfull.isFullscreen;
};

onMounted(() => {
    screenfull.on('change', handleFullscreenChange);
});

onUnmounted(() => {
    screenfull.off('change', handleFullscreenChange);
});

</script>

<style scoped>
button {
  margin: 20px 20px;
  padding: 10px 20px;
  font-size: 12px;
  cursor: pointer;
  border: none;
  background-color: #4CAF50;
  color: white;
  border-radius: 5px;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #45a049;
}

button.is-fullscreen {
  background-color: #f44336;
}

button.is-fullscreen:hover {
  background-color: #d32f2f;
}
</style>